<template>
    <div v-show="contactlist.length == 0">暂无联系人</div>
    <Button type="primary" ghost class="bold margin_15" @click="add">
        <Icon type="md-add" />添加联系人
    </Button>
    <Button type="default" @click="refresh">
        <Icon type="md-refresh" />刷新
    </Button>
    <PageHeader v-for="(item, i) in contactlist" :key="'title' + i" v-show="contactlist.length > 0">
        <template #title>
            <div class="header_title">
                <label class="contact_name">{{ item.name }}</label>
                <span class="contact_gender">{{ global_config.const_config_data.gender(item.gender) }}</span>
                <span class="contact_dept"> {{ item.dept_name }} </span>
                <Tag color="orange"> {{ global_config.const_config_data.important_level(item.important_level) }}</Tag>
            </div>
        </template>
        <template #content>
            <DescriptionList :col="3">
                <Description term="手机：">{{ item.tel_no }}</Description>
                <Description term="电话：">{{ item.phone_no }}</Description>
                <Description term="邮箱：">{{ item.email }}</Description>
            </DescriptionList>
        </template>
    </PageHeader>
    <Modal v-model="show_contact_modal" title="添加联系人" @on-visible-change="visibleChange">
        <Form ref="refAddContact" :model="form" :rules="validateRules">
            <Row :gutter="32">
                <Col :span="12">
                <FormItem label="姓名：" prop="name" label-width=72>
                    <Input type="text" v-model="form.name"></Input>
                </FormItem>
                </Col>
                <Col :span="12">
                <FormItem label="性别：" prop="gender" label-width=72>
                    <Select v-model="form.gender" style="width: 150px">
                        <Option value="0">未确定</Option>
                        <Option value="1">先生</Option>
                        <Option value="2">女士</Option>
                    </Select>
                </FormItem>
                </Col>
            </Row>
            <Row :gutter="32">
                <Col :span="12">
                <FormItem label="部门：" prop="dept_name" label-width=72>
                    <Input type="text" v-model="form.dept_name"></Input>
                </FormItem>
                </Col>
                <Col :span="12">
                <FormItem label="重要性：" prop="important_level" label-width=72>
                    <Select v-model="form.important_level" style="width: 150px">
                        <Option value="0">未确定</Option>
                        <Option value="1">重要</Option>
                        <Option value="2">普通</Option>
                    </Select>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col :span="24">
                <FormItem label="手机：" prop="tel_no" label-width=72> <Input type="tel" v-model="form.tel_no"></Input>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col :span="24">
                <FormItem label="电话：" prop="phone_no" label-width=72> <Input type="tel" v-model="form.phone_no"></Input>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col :span="24">
                <FormItem label="邮箱：" prop="email" label-width=72> <Input type="email" v-model="form.email"></Input>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col :span="24">
                <FormItem label="备注：" prop="note" label-width=72> <Input type="textarea" v-model="form.note"></Input>
                </FormItem>
                </Col>
            </Row>
        </Form>
        <template #footer>
            <Button type="default" @click="cancel">关闭</Button>
            <Button type="primary" @click="submit">提交</Button>
        </template>
    </Modal>
</template>

<script>
import axios from 'axios'
import global_config from '@/data/config'

export default {
    setup() {
        return { global_config }
    },
    props: {
        companies_id: Number,
    },
    methods: {
        fetch_contact_list: function () {
            axios.get("http://localhost:3000/api/company/contacts/query_contacts_by_companies_id?companies_id=" + this.companies_id)
                .then(resp => {
                    if (resp.data && resp.data.data) {
                        this.contactlist = resp.data.data;
                    }
                })
        },
        refresh: function (showmessage = true) {
            if (showmessage) this.$Message.success('刷新成功');
            this.fetch_contact_list()
        },
        add: function () {
            this.show_contact_modal = true
        },
        cancel: function () {
            this.show_contact_modal = false
        },
        submit: function () {
            this.$refs['refAddContact'].validate(valid => {
                if (valid) {
                    axios
                        .post("http://localhost:3000/api/company/contacts/add_contact",
                            this.form,
                            {
                                'Content-Type': 'application/json; charset=utf-8'
                            }
                        ).then(resp => {
                            if (resp.data && resp.data) {
                                this.$Message.success('添加成功')
                                this.form = {
                                    companies_id: this.companies_id,
                                }
                                this.show_contact_modal = false
                                this.refresh(false)

                            } else {
                                this.$Message.error('添加失败')
                            }
                        }).catch(error => {
                            this.$Message.error(error.response.data.error)
                        })

                } else {
                    // 如果验证不通过执行的一些操作
                    this.$Message.error('验证失败!');
                }
            })
        },
        visibleChange: function (value) {
            if (!value) this.$refs['refAddContact'].resetFields();
        },
        beforeClose: function () {
            alert('before close')
        },
    },
    created() {
        this.fetch_contact_list()
    },
    data() {
        return {
            show_contact_modal: false,
            contactlist: [],
            form: {
                companies_id: this.companies_id,
                name: null,
                tel_no: null,
                postal_code: null,
                address: null,
                followup_employee_code: null,
                important_level: 0,
                gender: 0
            },
            validateRules: {
                name: [{
                    required: true,
                    message: "姓名不能为空",
                    trigger: 'blur'
                }, {
                    max: 20,
                    message: "长度最长20",
                    trigger: 'change'
                }],
                tel_no: [
                    {
                        required: true,
                        message: "手机号不能为空",
                        trigger: 'blur'
                    },
                    {
                        max: 11,
                        message: "长度最长11",
                        trigger: 'change'
                    },
                ],
                note: [
                    {
                        max: 200,
                        message: '备注长度不能超过200',
                        trigger: 'change'
                    }
                ],
                email: [
                    {
                        type: 'email',
                        message: '邮箱格式错误',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    components: {
        // global_config_data
    },
}

</script>

<style>
.header_title {
    font-size: medium;
}

.color_blue {
    color: #1579F6;

}

.contact_name {
    color: #1579F6;
    font-size: 16px;
}

.contact_gender,
.contact_dept {
    font-size: 14px;
}

.header_title span {
    padding: 5px;
}

.bold {
    font-weight: bold;
}

.margin_15 {
    margin: 15px 15px 15px 0px;
}
</style>